<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公司注册</title>
  <link rel="stylesheet" href="./CSS/register.css">
  <style>
    .logoBox {
      position: relative;
      width: 70px;
      height: 70px;
      background-color: red;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div class="box" id="app">
    <div class="mask">
      <div class="spinner">
        <div class="cube1"></div>
        <div class="cube2"></div>
      </div>
    </div>
    <div class="LoginBox">
      <div class="LoginImage">

      </div>
      <div class="LoginLeft">
        <div class="LeftBox">
          <div class="BoxTitle">
            <p style="font-size: 20px;font-weight: 900;margin-bottom: 10px;">公司注册</p>
            <p style="color: red;" class="inputErrpMsg"></p>
          </div>

          <div class="inputBox1">

              <!-- 姓名输入框 -->
              <div class="inputBox">
                <p style="color: rgb(73, 161, 238);">公司名</p>
                <div class="inputP">
                  <input type="text" class="userInput" name="username" v-model="cname">
                </div>
              </div>
              <div class="userNmaeInputErro">中文、英文、数字</div>

              <!-- 密码输入框 -->
              <div class="inputBox">
                <p style="color: rgb(73, 161, 238);">密码</p>
                <div class="inputP">
                  <input type="password" class="userInput userPassword" name="password" v-model="cpassword">
                </div>
              </div>
              <div class="userPasswordInputErro">6~11位数字、字母、下划线</div>

              <!-- QQ邮箱输入框 -->
              <div class="inputBox">
                <p style="color: rgb(73, 161, 238);">QQ邮箱</p>
                <div class="inputP">
                  <input type="text" name="usernameQQemail" class="userQQemail" v-model="cemail">
                </div>
              </div>
              <div class="userEmailInputErro">@qq.com</div>

              <!-- 手机输入框 -->
              <div class="inputBox">
                <p style="color: rgb(73, 161, 238);">公司电话</p>
                <div class="inputP">
                  <input type="text" name="usernamePhoneNumber" class="userPhone" v-model="cphone">
                </div>
              </div>
              <div class="userPhoneInputErro">11位数字</div>
              <div class="inputBox" style="border: 0px;height: 105px;margin-bottom: 20px;">
                <p style="color: rgb(73, 161, 238);">公司logo</p>
                <div class="logoBox">
                  <input type="file" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;" @change="getImageUrl($event)" accept=".png,.jdp" name="photo" class="inputImage">
                  <img :src="showimageUrl" style="width: 100%;height: 100%;">
                </div>
              </div>
              <input type="submit" value="注册" class="inputSubmit" @click="register">
              <input type="submit" value="登录" class="inputregister" @click="login">

          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="./JS/vue.js"></script>
  <script>

    // 获取屏幕宽度
    var font = document.body.offsetWidth / 200 + "px";
    if (document.body.offsetWidth <= 1312) {
      font = 1312 / 200 + 'px'
    }
    document.querySelector("html").style.fontSize = font;


    // 正则表达式


    // 表单控制以及样式


    const vm = new Vue({
      el:'#app',
      data:{
        cname:'',
        cpassword:'',
        cemail:'',
        cphone:'',
        imageUpload:null,
        showimageUrl:'./image/noimage.jpg',

        desc:"这家伙很懒什么都没留下"
      },
      methods:{
        login(){
          location.href="./loginCompany.html"
        },
        register(){
          const zhenzheUsername = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
          const zhengzhePassword = /^\w{6,11}$/;
          const zhengzheQqemail = /\d+@qq.com/;
          const zhengzhePhoneNumber = /[1][3-9]\d{9}$/
          if(zhenzheUsername.test(this.cname)&&zhengzhePassword.test(this.cpassword)&&zhengzheQqemail.test(this.cemail)&&zhengzhePhoneNumber.test(this.cphone)&&this.imageUpload!=null){
            const formdata = new FormData()
            formdata.append('files', this.imageUpload)
            axios({
              method: 'post',
              url: '/Indenture/company/updateUrl',
              headers: {
                'Content-Type': 'multipart/form-data'
              },
              data:formdata
            }).then((res) => {
              console.log(res)
              axios({
                method: 'post',
                url: '/Indenture/companyInsert',
                data: {
                  cname: this.cname,
                  cpassword: this.cpassword,
                  cemail: this.cemail,
                  logo:res.data.url,
                  cphone:this.cphone,
                  desc:this.desc
                }
              }).then((res2) => {
                console.log(res2.data)
                if (parseInt(res2.data.statue) == 1) {
                  alert("添加成功")
                  location.href="./loginCompany.html"
                }
                else {
                  alert("添加失败")
                }
              })
            })
          }
        },
          async getImageUrl(event) {
            const file = event.target.files[0]
            console.log(file)
            const base64Str = await this.changeFileIntoBase64(file);
            this.showimageUrl = base64Str
            console.log(base64Str)
            this.imageUpload = file
          },
        changeFileIntoBase64(file) {
          return new Promise((resolve, reject) => {
            const fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = (result) => {
              const base64Str = result.currentTarget.result;
              resolve(base64Str);
            };
          });
        }
      }
    })
  </script>
</body>

</html>